<template>
    <div>
        <h1>显示</h1>
        名称:
        <input type="text" v-model="Cha.Name">
        状态：
        <input type="radio" name="State" :value="'true'" v-model="Cha.State">启用
        <input type="radio" name="State" :value="'false'" v-model="Cha.State">停用
        <input type="button" value="查询"  @click="Show">


        <input type="button" value="重置"  @click="Show">
        <table border="6">
            <thead>
                <tr>
                    <td>编号</td>
                    <td>房间名称</td>
                    <td>市场价格</td>
                    <td>房间数量</td>
                    <td>状态</td>
                    <td>操作</td>
                </tr>
            </thead>
            <tbody v-for="a in data">
                <tr>
                    <td>{{a.Id}}</td>
                    <td>{{a.Name}}</td>
                    <td>{{a.Maney}}</td>
                    <td>3</td>
                    <td>{{a.State?"启用":"停用"}}</td>
                    <td>
                        <input type="button" value="逻辑删除" @click="Del(a.Id)">
                        <input type="button" value="修改" @click="Fan(a.Id)">
                    </td>
                </tr>
            </tbody>
        </table>

        <input type="button" value="首页" @click="fy(1)">
        <input type="button" value="上一页" @click="fy(2)">
        <input type="button" value="下一页" @click="fy(3)">
        <input type="button" value="尾页" @click="fy(4)">


        跳转到<input type="text">页
        <input type="button" value="跳转">

        一共{{Page.zys}}页，一共{{Page.zhs}}行，第{{Cha.PageIndex}}页，每页{{Cha.PageSize}}行




    </div>
</template>

<script setup lang="ts">
import { ref,onMounted} from 'vue';
import axios from 'axios';
import { useRoute, useRouter } from 'vue-router';
onMounted(()=>{
    Show()
})


//显示M
const data = ref([{
    "Id": 0,
      "Name": "",
      "Maney": "",
      "RoomNum": "",
      "Num": 0,
      "State": true,
      "IsDatel": true
}])
//查询
const Cha = ref({
    "Name": "",
    "State": "",
    PageIndex:1,
    PageSize:3
})

const Chong = ref({
    "Name": "",
    "State": "",
    PageIndex:1,
    PageSize:2
})
//分页
const Page = ref({
    zhs:0,
    zys:0
})

const fy=(vul:any)=>{
    if(vul==1){
        Cha.value.PageIndex=1;
        Show();
    }
    if(vul==2){
        if(Cha.value.PageIndex>1){
            Cha.value.PageIndex-=1;
            Show()
        }
    }
    if(vul==3){
        if(Cha.value.PageIndex<Page.value.zys){
            Cha.value.PageIndex+=1;
            Show()
        }
    }


    if(vul==4){
        Cha.value.PageIndex=Page.value.zys;
        Show()
    }
}






//显示方法
const Show=()=>{
    axios.get('https://localhost:7201/api/Room/AllGet',{params:Cha.value}).then(res=>{
        data.value = res.data.list
        Page.value.zhs=res.data.count
        Page.value.zys=Math.ceil(Page.value.zhs/Cha.value.PageSize)
    })
}

//逻辑删除
const Del = (e:any)=>{
    if(confirm('确定删除吗？')){
        axios.delete('https://localhost:7201/api/Room/Del',{params:{Id:e}}).then(res=>{
            if(res.data>0){
                alert('删除成功');
                Show()
            }
            else{
                alert('删除失败')
            }
        })
    }
    
}

const router = useRouter()
const route = useRoute()
//反填
const Fan=()=>{
    
    router.push({path:'/Upd'})
}



</script>

<style scoped>

</style>